<template>
  <div>
    <page-nav :titlearr="titlearr"></page-nav>
    <div class="video_wrap">
      <div class="video_form">
        <el-input></el-input>
        <el-button type="primary">查询</el-button>
        <el-button type="success">添加视频</el-button>
      </div>
      <div class="video_table">
        <div class="table_title">
          <i class="el-icon-platform-eleme"></i>
          <div>视频列表</div>
        </div>
        <div>
          <el-table border>
            <el-table-column label="视频名称">

            </el-table-column>
            <el-table-column label="绑定课程">

            </el-table-column>
            <el-table-column label="视频时长">

            </el-table-column>
            <el-table-column label="上传日期">

            </el-table-column>
            <el-table-column label="操作">
              <template>
                <div>
                  <el-button type="dander">编辑</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page_wrap">
            <el-button size="small"
                       type="primary">首页</el-button>
            <el-pagination :total="1000"
                           :page-size="6"
                           :current-page="1"
                           layout="prev,next,pager"></el-pagination>
            <el-button size="small"
                       type="primary">尾页</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageNav from '../../components/pageNav'
export default {
  name: "video",
  data () {
    return {
      titlearr: [
        {
          name: "首页",
          path: "/home"
        },
        {
          name: "课程管理",
          path: "/home"
        },
        {
          name: "视频管理",
          path: "/video"
        }
      ]
    }
  },
  components: {
    pageNav
  }
}
</script>
<style lang="less">
.video_wrap {
  width: 1300px;
  margin: 10px auto;
  .video_form {
    display: flex;
    .el-input {
      width: 300px;
    }
  }
  thead th {
    background: #ccc;
  }
  .table_title {
    width: 1300px;
    margin: 40px auto 0;
    line-height: 40px;
    display: flex;
    i {
      width: 38px;
      height: 38px;
      border: 1px solid black;
      line-height: 38px;
      text-align: center;
      font-size: 20px;
      border-right: none;
    }
    > div {
      height: 40px;
      border: 1px solid black;
      flex: 1;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }
  .page_wrap {
    display: flex;
  }
}
</style>